<template>
    <div class="association-wrapper">
        <DataGrid :auto-load="autoLoad" row-key="id" border default-expand-all :pagination="false" :showToolbar="false">
            <el-table-column type="index" label="序号" width="50px" align="center" />
            <el-table-column label="模型名称" width="280">
                <template #default="scope">
                    <el-button link type="primary" @click="onGoPage(scope.row)"
                        >{{ scope.row.displayName
                        }}{{
                            !scope.$index && scope.row.children && scope.row.children.length
                                ? `（${scope.row.children.length}）`
                                : ''
                        }}</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column prop="objectName" label="标识符" width="280" />
            <el-table-column prop="modifierType" label="模型性质">
                <template #default="scope">
                    {{ modifierType[scope.row.modifierType] }}
                </template>
            </el-table-column>
            <el-table-column prop="usageType" label="模型用途">
                <template #default="scope">
                    {{ usageType[scope.row.usageType] }}
                </template>
            </el-table-column>
            <el-table-column prop="objectType" label="模型类型">
                <template #default="scope">
                    {{ objectType[scope.row.objectType] }}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <span class="table-item-status" :status="activeState[scope.row.activeState]">
                        {{ activeState[scope.row.activeState] }}
                    </span>
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import { modelThingService } from '@great/services';
import type { SysMetadataObject } from '@great/services';
import { modifierType, usageType, activeState, objectType } from '@/utils/constant';
import { DataGrid } from '@great/components';
import { useRouter } from 'vue-router';

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
const router = useRouter();
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [],
    onLoad: async () => {
        const res = await modelThingService.getFullTree({
            objectNames: props.detailData?.objectName,
            showChildren: true,
            showAttribute: false,
            isActivate: 0
        });
        return { data: res.data };
    }
});

const onGoPage = (row: { id: string }) => {
    router.push({
        name: 'model-thing-detail',
        params: {
            id: row?.id
        }
    });
};
</script>
<style scoped lang="scss">
.association-wrapper {
    :deep(.data-grid) {
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='未激活'] {
            &::before {
                background-color: #909399;
            }
        }
        .table-item-status[status='激活'] {
            &::before {
                background-color: #67c23a;
            }
        }
    }
}
</style>
